<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="/css/elementui/index.css">
<link rel="stylesheet" href="/css/exam/css/style.css">
<link rel="stylesheet" href="/iconfont/iconfont.css">
</head>
<body>
<div id="app">
  <div  class="p-30">
	  <el-row>
			<span class="icon iconfont icon-arrow_back"></span> <a href="{{route('admin.examview.index')}}">返  回</a> | 添加试题
	  </el-row><br>
      <el-form :model="addExamForm" :rules="rules" ref="addExamForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="所属分类" prop="cid">
                <el-select v-model="addExamForm.cid" placeholder="请选择分类">
                    <el-option
                            v-for="item in cidData"
                            :key="item.id"
                            :label="item.c_name"
                            :value="item.id"
                        >
                    </el-option>
                </el-select> <el-button><a href="{{route('admin.examview.category')}}">分类管理 </a></el-button>
            </el-form-item>
			<el-form-item label="试题难度" prop="difficulty">
				<el-select v-model="addExamForm.difficulty" placeholder="请选择">
					<el-option label="简单" value="1"></el-option>
					<el-option label="中等" value="2"></el-option>
					<el-option label="难" value="3"></el-option>
					<el-option label="特别难" value="4"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="试题标题" prop="exam_content" placeholder="试题标题">
			    <el-input v-model="addExamForm.exam_content"></el-input>
			</el-form-item>
            <el-form-item label="分&ensp;&ensp;数" prop="score" placeholder="分数">
                <el-input v-model="addExamForm.score"  :step="1" step-strictly size="medium" controls-position="right" type="number"></el-input>
				<i style="margin-left:10px;" class="el-icon-info">请输入整数。不支持小数。&emsp;&emsp;常见分数：</i>
				<el-link class="ml-10" @click="addExamForm.score = 1" type="primary">1分</el-link>
				<el-link class="ml-10" @click="addExamForm.score = 2" type="primary">2分</el-link>
				<el-link class="ml-10" @click="addExamForm.score = 5" type="primary">5分</el-link>
				<el-link class="ml-10" @click="addExamForm.score = 10" type="primary">10分</el-link>
            </el-form-item>
            <el-form-item label="选&ensp;&ensp;项1" prop="option1" placeholder="选项1">
                <el-input v-model="addExamForm.option1"></el-input>
            </el-form-item>
            <el-form-item label="选&ensp;&ensp;项2" prop="option2" placeholder="选项2">
                <el-input v-model="addExamForm.option2"></el-input>
            </el-form-item>
            <el-form-item label="选&ensp;&ensp;项3" prop="option3" placeholder="选项3">
                <el-input v-model="addExamForm.option3"></el-input>
            </el-form-item>
            <el-form-item label="选&ensp;&ensp;项4" prop="option4" placeholder="选项4">
                <el-input v-model="addExamForm.option4"></el-input>
            </el-form-item>	
			<el-form-item label="正确答案" prop="answer">
				<el-select v-model="addExamForm.answer" placeholder="请选择">
					<el-option label="选项1" value="option1"></el-option>
					<el-option label="选项2" value="option2"></el-option>
					<el-option label="选项3" value="option3"></el-option>
					<el-option label="选项4" value="option4"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="解&ensp;&ensp;析" placeholder="解析">
			    <el-input v-model="addExamForm.analysis"></el-input>
			</el-form-item>	
            <el-row>
                <el-button @click="saveExam('addExamForm')" type="primary" v-debounce>保&ensp;&ensp;存</el-button>
                <el-button @click="cancelExam('addExamForm')">取&ensp;&ensp;消</el-button>
            </el-row>         
        </el-form>

  </div>

</div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script src="/css/exam/js/common.js"></script>
<script>

const app = new Vue({
  el: '#app',
  data() {
    return { 
        addExamForm: {
       //所属分类
       cid: '',
	   difficulty:'',
       //分数
       score: '',
       //解析
       analysis: '',
       //试题内容
       exam_content: '',
       //正确答案
       answer: '',
	   option1:'',
	   option2:'',
	   option3:'',
	   option4:'',
      },

        cidData: [], //分类数据

        rules: {
          cid: [{ required: true, message: '请选择所属分类'}],
          difficulty: [{ required: true, message: '请选择试题难度'}],
		  exam_content: [
		    { required: true, message: '请输入试题标题', trigger: 'blur' },
		    { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
		  ],
          score: [
            { required: true, message: '请输入分数', trigger: 'blur' },
            { pattern: /^[0-9]*$/, message: '请输入数字', trigger: 'blur' }
          ],
		  answer: [{ required: true, message: '请选择'}],
		  option1: [
		    { required: true, message: '请输入', trigger: 'blur' },
		    { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
		  ],
		  option2: [
		    { required: true, message: '请输入', trigger: 'blur' },
		    { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
		  ],
		  option3: [
		    { required: true, message: '请输入', trigger: 'blur' },
		    { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
		  ],
		  option4: [
		    { required: true, message: '请输入', trigger: 'blur' },
		    { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
		  ]
        },
    }
    
  },
  created() {
    this.getciddata();
  },
  methods: {
        // 编辑、增加页面保存方法
        saveExam(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

                let addExamForm = this.addExamForm
                axios.post('/admin/exam/edit',addExamForm)
                .then(res => {
                if (res.data.code == 0) {                     
                    this.$message({
                    type: 'success',
                    message: '保存成功！'
                    });
                   this.$refs[formName].resetFields();
                }  else if(res.data.code == 408){
					this.$message({
						type: 'info',
						message: '该名称已存在，请重新录入！'
					})
				} else{
					this.$message({
						type: 'info',
						message: '网络原因，请稍后再试'
					})
				}
                })
          } else {
            return false;
          }
        });
      },
 
        cancelExam(formName) {
            this.$refs[formName].resetFields();
        },
        getciddata() {      
            axios.post('/admin/exam/category_index',{})
            .then(response =>{
                console.log('请求成功：',response.data.data);
                this.cidData = response.data.data;
                console.log(this.cidData);  
            }).catch(error =>{
                console.log('请求失败：' + error);
            })
          },
		  goBack() {
		    window.history.go(-1)
		    console.log('go back');
		  },

        },     
})

</script>
<style scoped>
 a{color:#409EFF;text-decoration: none;}
 .el-page-header__content { font-size: 16px;}
</style>
</html>

